<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="SUP">
                <span class="seachCSC">
                    {{$t('mertnam')}}
                    <el-input v-model.trim="selMrec.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachCSC">
                    {{$t('chnnumber')}}
                    <el-input v-model.trim="selMrec.channelCode" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachStatus">
                    {{$t('payttim')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="selMrec.startTime" width="20%" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
                <!-- <span class="seachStatus">
                    {{$t('sta')}}
                    <el-select v-model="selMrec.payStatus" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('create')" :value="0"></el-option>
                        <el-option :label="$t('succ')" :value="1"></el-option>
                        <el-option :label="$t('failed')" :value="2"></el-option>
                        <el-option :label="$t('inprogress')" :value="3"></el-option>
                    </el-select>
                </span> -->
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seachList" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="success" @click="exportExcel" size="mini" v-preventReClick>{{$t('expot')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="mRecList" id="out-table">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="batchNo" :label="$t('batchNo')" width="196">
                </el-table-column>
                <el-table-column prop="transId" :label="$t('trstid')" width="196">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" width="194">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" width="193">
                </el-table-column>
                <el-table-column prop="sendChannelOrderNo" :label="$t('sedchnodrno')" width="193">
                </el-table-column>
                <el-table-column prop="channelCode" :label="$t('chnnumber')">
                </el-table-column>
                <el-table-column prop="payStatus" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="amt" :label="$t('amtofpayt')" min-width="96">
                </el-table-column>
                <el-table-column prop="payTime" :label="$t('payttim')" width="183">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailsmRec(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selMrec.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selMrec.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    monreclist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    data () {
        return {
            total: 0,
            detDialogVisible: false,
            selMrec: {
                sendChannelOrderNo: null,
                channelCode: null,
                payeeUserId: null,
                merName: null,
                payStatus: null,
                startTime: null,
                pageSize: 10,
                pageNum: 1
            },
            mRecList: [],
            detmRecForm: {}
        }
    },
    methods: {
        seachMonRec () {
            monreclist(JSON.stringify(this.selMrec)).then(res => {
                if (res.data.code === '000000') {
                    this.mRecList = res.data.data.list
                    this.total = res.data.data.total - 0
                    if (this.mRecList !== null) {
                        this.mRecList.forEach(item => {
                            switch (item.payStatus) {
                                case '1':
                                    item.payStatus = this.$t('succ')
                                    break
                                case '2':
                                    item.payStatus = this.$t('failed')
                                    break
                                case '3':
                                    item.payStatus = this.$t('inprogress')
                                    break
                                case '4':
                                    item.payStatus = this.$t('channelproces')
                            }
                        })
                    }
                }
            })
        },
        seachList () {
            if (this.selMrec.merName === '') this.selMrec.merName = null
            if (this.selMrec.channelCode === '') this.selMrec.channelCode = null
            if (this.selMrec.startTime !== null) this.selMrec.startTime.split('-').join('')
            this.selMrec.pageNum = 1
            this.seachMonRec()
        },
        handleSizeChange (newSize) {
            this.selMrec.pageSize = newSize
            this.seachMonRec()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selMrec.pageNum = newNum
            this.seachMonRec()
        },
        detailsmRec (data) {
            window.sessionStorage.setItem('handlePayNo', data.transId)
            switch (data.payStatus) {
                case this.$t('succ'):
                    data.payStatus = '1'
                    break
                case this.$t('failed'):
                    data.payStatus = '2'
                    break
                case this.$t('inprogress'):
                    data.payStatus = '3'
                    break
                case this.$t('channelproces'):
                    data.payStatus = '4'
            }
            window.sessionStorage.setItem('handleSta', data.payStatus)
            this.$router.push('/sec/monRecDet')
        },
        // 导出函数
        exportExcel () {
            let fix = document.querySelector('.el-table__fixed-right')
            let xlsxParam = { raw: true }
            /* generate workbook object from table */
            let wb
            if (fix) {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix), xlsxParam)
                document.querySelector('#out-table').appendChild(fix)
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
            }
            /* get binary string as output */
            let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }), '打款记录.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        }
    },
    mounted () {
        this.selMrec.startTime = getInitDate(0, 0)
        this.seachMonRec()
    }
}
</script>

<style lang="less" scoped>
@import './monRec.less';
</style>
